<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 
	 computed和watch之间的区别:
		 1、computed能完成的功能，watch 都可以完成。
		 2、watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
	 两个重要的小原则:
		 1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
		 2、所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，
		 这样this的指向才是vm或组件实例对象。

	 -->
	<body>
		<div id="root">
			<div @click="handleClick">按钮</div>
		</div>
	</body>
	<script>
		const vm = new Vue({
			el:'#root',
			data(){
				return { 
					clicked:false
				}
			},
			methods:{
				handleClick(){
					this.clicked = !this.clicked
				}
			},
			computed:{
				className(){
					return this.clicked ? "box active" : "box"
				}
			},
			watch:{
				// clicked:{
				// 	// 当配置项中只有handler时，就可以使用简写模式。
				// 	// immediate:true,//初始化时，让handler调用一下
				// 	// deep:true,
				// 	//当clicked的值被修改的时候，调用一次
				// 	handler(newValue,oldValue){
						
				// 	}
				// }
				clicked(newValue,oldValue){
					
				}
			}
		})
		
		//vm.$watch的简写模式，注意不能使用箭头函数
		vm.$watch('clicked',function(newValue,oldValue){
			
		})
	</script>
</html>